<template>
  <a-modal
      :maskClosable="maskClosable"
      title="基础设施详情"
      :width="600"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :okButtonProps="{ class: { 'jee-hidden': true } }"
      @cancel="handleCancel"
      cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :labelCol="{ span: 7 }" :wrapperCol="{ span: 8 }" :form="form">
        <a-form-item label="数据中心">
          <span class="ant-form-text"> {{ model.datacenterName }} </span>
        </a-form-item>
        <a-form-item label="设备类型">
          <span class="ant-form-text"> {{ model.typeCnName }} </span>
        </a-form-item>
        <a-form-item label="设备名称">
          <span class="ant-form-text"> {{ model.name }} </span>
        </a-form-item>
        <a-form-item label="设备厂商">
          <span class="ant-form-text"> {{ model.deviceManufacturer }} </span>
        </a-form-item>
        <a-form-item label="设备型号">
          <span class="ant-form-text"> {{ model.deviceModel }} </span>
        </a-form-item>
        <a-form-item label="资源序列号">
          <span class="ant-form-text"> {{ model.esn }} </span>
        </a-form-item>
        <a-form-item label="创建时间">
          <span class="ant-form-text"> {{ model.createTime }} </span>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import { gPostAction } from '@/api/manage'
export default {
  name: 'DetailModal',
  data() {
    return {
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      model: {
        id:'',
        name:'',
        esn:'',
        typeCnName:'',
        deviceModel:'',
        deviceManufacturer:'',
        datacenterName:'',
        creator:'',
        createTime:'',
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      maskClosable: false,
    }
  },
  methods: {
    detail(record) {
      this.model = Object.assign(this.model, record)
      this.visible = true
      const requestData = {
        id: record.id,
        content: '基础设施详情'
      }
      gPostAction('/asset/detailDevice', requestData)
    },
    handleCancel(e) {
      this.visible = false
    },
  },
}
</script>
